<template>
    <div class="content-container">
        <div class="draw-container">
            <div class="function-area">
                <span class="dateInfo">{{dateInfo}}</span>

                <div>
                    <el-button type="primary" size="medium" round @click="imgDonwload">图片导出</el-button>
                </div>
            </div>

            <div class="draw-area">
                <img :src="img" />
            </div>
        </div>
    </div>
</template>

<script>
import img from "@/assets/img/Atmospheric diffusion/windfield/1.gif";

export default {
    name: "WindField",
    data() {
        return {
            img: img,
            dateInfo: ''
        };
    },
    mounted(){
        this.getSelectData();
    },
    methods: {
        getSelectData(){    //获取日期选择数据
            const start = "2020_M09_D06_0000";
            const end = "2020_M09_D06_1200"
            this.dateInfo = start + " 至 " + end;
        },
        imgDonwload(){
            const elink = document.createElement("a");
            elink.download = this.dateInfo + ".gif";
            elink.style.display = "none";
            elink.href = this.img;
            document.body.appendChild(elink);
            elink.click();
            URL.revokeObjectURL(elink.href); // 释放URL 对象
            document.body.removeChild(elink);
        }
    }
};
</script>

<style lang="scss" scoped>
    @import "@/assets/css/ADcontent.scss";
</style>